<!DOCTYPE html>
<html lang="en">
<head>
    <title>完成订单</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--bootstrap-->
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <!--字体-->
    <link rel="stylesheet" type="text/css" href="css/font.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
    <!--设置头部-->
    <link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
    <script type="text/javascript" src="js/yj_style.js"></script>
    <link type="text/css" rel="stylesheet" href="css/static.css">
    <!--&lt;!&ndash;日期输入框&ndash;&gt;-->
    <!--<script src="js/bootstrap-datepicker.js"></script>-->
    <!--<script src="js/locales/bootstrap-datepicker.zh-CN.js"></script>-->
    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker.min.css">-->
    <!--&lt;!&ndash;轮播,搜索，商品列表&ndash;&gt;-->
    <!--<link rel="stylesheet" type="text/css" href="css/yj_supply_css.css">-->
    <!--<script src="js/yj_supply.js"></script>-->
    <!--&lt;!&ndash;轮播&ndash;&gt;-->
    <!--&lt;!&ndash;前三种&ndash;&gt;-->
    <!--<script src="js/jquery.luara.0.0.1.min.js"></script>-->
    <!--&lt;!&ndash;第四种和第五种&ndash;&gt;-->
    <!--<script src="js/unslider.min.js"></script>-->


</head>
<body>
<div class="head">
    <div class="header">
        <a href="#menu" class="header-a"><i class="fa fa-reorder head-style"></i></a>
        <span class="header-word">完成订单</span>
        <a href="${ctx }/customer/toIndex"><i class="fa fa-home head-style home-style"></i></a>
    </div>

    <nav id="menu">
        <ul>
            <li class="menu-li-head"><a href="hotel.html">酒店入住 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="${ctx }/customer/perfectInformation">完善信息 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="hotel.html">房间管理 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="groom.html">猜你喜欢 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="restaurant.html">餐馆美食 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="visiting.html">游玩攻略 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="traffic.html">交通指南 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="aboutus.html">关于我们 <i class="fa fa-angle-double-right"></i></a></li>
        </ul>
    </nav>

</div>
<div class="content"  >
    <div class="success-title" >
        <div class="success-title-name" >
            <i class="fa fa-check-square-o success-check"></i><span class="success-title-name-detail">恭喜您，订单完成</span>
        </div>
        <div class="success-body">
            <!--<div class="success-word">-->
                <!--<p><span class="success-type">码券类型：</span><span class="success-type-word">假日酒店总统套房</span></p>-->
                <!--<p><span class="success-type">码券数量：</span><span class="success-type-word">2</span>张</p>-->
                <!--<p><span class="success-type">码券详情：</span><span class="success-type-word">点击即可查看详情</span></p>-->
                <!--<p><span class="success-type">支付类型：</span><span class="success-type-word">支付宝</span></p>-->
                <!--<p><span class="success-type">押金支付金额：</span><span class="success-type-word">200</span>元</p>-->
            <!--</div>-->
            <div class="aboutus-content">
                <p class="mobile"><span class=" mobile-special">订单号：</span><span class="content-word">18805063234</span></p>
                <p class="mobile"><span class=" mobile-special">码券类型：</span><span class="content-word">假日酒店总统套房</span> </p>
                <p class="mobile"><span class=" mobile-special">码券数量：</span><span class="content-word">2</span> 张</p>
                <p class="mobile"><span class=" mobile-special">押金金额：</span><span class="content-word">200</span> 元</p>
                <p class="mobile"><span class=" mobile-special">押金支付状态：</span><span class="content-word">已支付</span> </p>
                <p class="mobile"><span class=" mobile-special">订单详情：</span><span class="content-word content-word-style" data-target="#information_detail" data-toggle="modal">点击查看详情</span> </p>

            </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="information_detail" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 40px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        订单详情
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="room-style">
                        <div class="order-item-hotel-name">
                            <span class="order-item-title">房号:</span>
                            <span class="choosen-hotel-name">104</span>
                        </div>
                        <div class="order-item-hotel-name">
                            <span class="order-item-title">入住时间:</span>
                            <span class="choosen-hotel-name">2016-3-21</span>
                        </div>
                        <div class="order-item-hotel-name">
                            <span class="order-item-title">离房时间:</span>
                            <span class="choosen-hotel-name">2016-3-23</span>
                        </div>
                        <div class="order-item-hotel-name">
                            <span class="order-item-title">联系人:</span>
                            <span class="choosen-hotel-name">白雪公主</span>
                        </div>
                    </div>
                    <div class="room-style">
                        <div class="order-item-hotel-name">
                            <span class="order-item-title">房号:</span>
                            <span class="choosen-hotel-name">104</span>
                        </div>
                        <div class="order-item-hotel-name">
                            <span class="order-item-title">入住时间:</span>
                            <span class="choosen-hotel-name">2016-3-21</span>
                        </div>
                        <div class="order-item-hotel-name">
                            <span class="order-item-title">离房时间:</span>
                            <span class="choosen-hotel-name">2016-3-23</span>
                        </div>
                        <div class="order-item-hotel-name">
                            <span class="order-item-title">联系人:</span>
                            <span class="choosen-hotel-name">白雪公主</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">-->
                        <!--<a href="orderstep3.html" class="modal-default">取消</a>-->
                    <!--</button>-->
                    <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
                        <a class="modal-right">确定</a>
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<div class="footer">
    <p class="footer-bottom">
        <a href="${ctx }/customer/toIndex">首页</a>
        <span class="footer_vertical_line">|</span>
        <a href="groom.html">推荐</a>
        <span class="footer_vertical_line">|</span>
        <a href="management.html">管理</a>
        <span class="footer_vertical_line">|</span>
        <a href="aboutus.html">我们团队</a>

    </p>

</div>

</body>
</html>